@import url('../node_modules/tocas/dist/tocas.css');
@import url('../node_modules/dseg/css/dseg.css');

*:focus {
  outline: none;
}

body {
  user-select: none;
  cursor: default;
  overflow: hidden;
}

#canvas-container {
  overflow: hidden;
}

canvas {
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.credits, .stats {
  z-index: 10;
}

.controls {
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 10;
}

.hidden {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

img[src^="blob:"] {
  pointer-events: none;
}

.flow-right {
  float: right;
}

.number {
  position: relative;
  font-family: 'DSEG7-Classic', sans-serif;
  font-style: italic;
  letter-spacing: normal;
  vertical-align: text-top;
  text-align: right;
  display: inline-block;
}

.number::before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  font-family: 'DSEG7-Classic';
  opacity: 0.2;
}

.number.n4-digits { width: 4ch; }
.number.n4-digits::before { content: '8.8.8.8.'; }
.number.n5-digits { width: 5ch; }
.number.n5-digits::before { content: '8.8.8.8.8.'; }
.number.n7-digits { width: 7ch; }
.number.n7-digits::before { content: '8.8.8.8.8.8.8.'; }
